<template>
  <div class="box">
    fsfsfsdf
	    <el-button type="danger">Danger</el-button>

	<div>{{ userStore.name }}</div>
	  <button @click="handleChange">修改Pinia</button>
	  
	  <vue3-seamless-scroll
	      hover-stop="true"
	      :list="listData"
	      hover="true"
	      step="0.3">
	      <div
	        v-for="(item, index) in listData"
	        :key="index"
	        class="item"
	        style="padding: 10px; margin: 5px; font-size: 14px">
	        11111
	      </div>
	    </vue3-seamless-scroll>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { post } from '../../api/request'
  import { useUserStore } from '../../store/user'

  const userStore = useUserStore()
  //修改Pinia的state
  const handleChange = () => {
    userStore.name=`"修改后的Pinia==>"${Date.now()};`
  };
  let listData=['','','','','','','']
  let defaultOption = computed(()=>{
	  return {
	      step: 0.2, // 数值越大速度滚动越快
	      limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
	      hoverStop: true, // 是否开启鼠标悬停stop
	      direction: 1, // 0向下 1向上 2向左 3向右
	      openWatch: true, // 开启数据实时监控刷新dom
	      singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
	      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
	      waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
	  }
  })
	
  // return {
  //   handleChange
  // }
</script>


<style lang="scss" scoped>
.box{
    color: #d00;
}
.seamless-warp{
 
      width: 100%;
      height: 200%;
      overflow: hidden;
      color:rgba(255,255,255, 1);
      position: relative;
      overflow-y: auto;


      span{
        display:block;
        line-height: 3;
        font-size: 20px;

      }
    }
       .ul-scoll{
            li{
                margin: 10px;
                padding: 10px;
                background: rgba(186, 218, 207, 0.4);
            }
        }
</style>
